const getCategoryAxis = (data: any[]) => ({
  type: "category",
  data,
  axisTick: {
    interval: 0,
  },
  axisLabel: {
    interval: 0,
    hideOverlap: false,
    overflow: "breakAll",
  },
});
/**
 * @description: 水柱状图
 */
export const getWaterOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 30,
      left: 40,
      right: 0,
      bottom: 40,
    },
    legend: {},
    xAxis: getCategoryAxis([2022, 2023, 2024]),
    yAxis: [
      {
        type: "value",
        max: 100,
        min: 0,
        splitNumber: 5,
        name: "再生水利用率(%)",
        nameLocation: "start",
        nameGap: 25,
        nameTextStyle: {
          fontWeight: 600,
          align: "left",
          fontSize: 14,
        },
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "当前值",
        type: "bar",
        data: [93, 93],
        barWidth: 30,
        label: {
          show: true,
          formatter: "{c}%",
          color: "#fff",
        },
      },
      {
        name: "目标值",
        type: "bar",
        data: [97, 92, 98],
        barWidth: 30,
        label: {
          show: true,
          formatter: "{c}%",
          color: "#fff",
        },
      },
    ],
  };
};
const datas = [
  {
    name: "能源",
    score: 10,
    actual: 4,
  },
  {
    name: "绿色交通",
    score: 62,
    actual: 50,
  },
  {
    name: "水",
    score: 86,
    actual: 54,
  },
  {
    name: "固废",
    score: 43,
    actual: 39,
  },
  {
    name: "生态环境",
    score: 47,
    actual: 37,
  },
  {
    name: "建筑",
    score: 36,
    actual: 29,
  },
  {
    name: "韧性",
    score: 80,
    actual: 68,
  },
];
/**
 * @description: 评估结果雷达图
 */
export const getForecastOptions = () => {
  return {
    tooltip: {
      trigger: "item",
    },
    radar: {
      radius: "70%",
      indicator: datas.map((item) => ({
        name: item.name,
        max: item.score,
      })),
      axisLine: {
        show: true,
        lineStyle: {
          opacity: 0.5,
        },
      },
      axisLabel: {
        margin: 0,
        hideOverlap: false,
      },
      splitArea: {
        areaStyle: {
          color: ["transparent", "rgb(220,251,239)"],
        },
      },
    },
    series: [
      {
        name: "评估结果",
        type: "radar",
        itemStyle: {
          color: "rgb(113,181,2)",
        },
        lineStyle: {
          color: "rgb(113,181,2)",
        },
        data: [
          {
            value: datas.map((item) => item.actual),
            name: "评估结果",
          },
        ],
      },
    ],
  };
};
/**
 * @description: 潜在绿色项目占比饼图
 */
export const getGreenOptions = () => {
  const avg = 100 / datas.length;
  return {
    tooltip: {
      trigger: "item",
    },
    color: datas.map(
      (item, index) => `rgba(6,221,141,${Math.round(100 - avg * index) / 100})`
    ),
    series: [
      {
        name: "潜在绿色项目占比",
        type: "pie",
        radius: ["0", "45%"],
        avoidLabelOverlap: true,
        minShowLabelAngle: 0,
        stillShowZeroSum: true,
        label: {
          show: true,
          formatter: "{b}: {c}%",
        },
        labelLine: {
          length2: 0,
        },
        data: datas.map((item) => ({
          name: item.name,
          value: item.actual,
        })),
      },
    ],
  };
};
/**
 * @description: 固废环形柱状图
 */
export const getSolidWasteOptions = () => {
  const pieCenter = ["20%", "60%"];
  return {
    title: [
      {
        text: "城市生活垃圾\n资源化利用率",
        left: pieCenter[0],
        bottom: 0,
        textAlign: "center",
        textStyle: {
          fontWeight: "bold",
          fontSize: 12,
        },
      },
      {
        text: "城市生活垃圾\n回收利用率",
        left: pieCenter[1],
        bottom: 0,
        textAlign: "center",
        textStyle: {
          fontWeight: "bold",
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    legend: {
      top: "middle",
      left: "right",
      orient: "vertical",
      align: "left",
      data: ["当前值", "目标值"],
    },
    series: [
      {
        name: "当前值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 70,
          },
          {
            value: 30,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["25%", "45%"],
        center: [pieCenter[0], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
      {
        name: "目标值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 90,
          },
          {
            value: 10,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["50%", "70%"],
        center: [pieCenter[0], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
      {
        name: "当前值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 70,
          },
          {
            value: 30,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["25%", "45%"],
        center: [pieCenter[1], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
      {
        name: "目标值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 90,
          },
          {
            value: 10,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["50%", "70%"],
        center: [pieCenter[1], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
    ],
  };
};
/**
 * @description: 生态环境柱状图
 */
export const getEcotopeOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {},
    grid: {
      top: 30,
      left: 40,
      right: 0,
      bottom: 40,
    },
    xAxis: getCategoryAxis([
      "当前AOI优良率",
      "城市水环境质量\n优于五类比例",
      "城市绿地率",
    ]),
    yAxis: [
      {
        type: "value",
        max: 100,
        min: 0,
        splitNumber: 5,
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "当前值",
        type: "bar",
        data: [80, 80, 80],
        barWidth: 30,
        label: {
          show: true,
          formatter: "{c}%",
          color: "#fff",
        },
      },
      {
        name: "目标值",
        type: "bar",
        data: [97, 92, 98],
        barWidth: 30,
        label: {
          show: true,
          formatter: "{c}%",
          color: "#fff",
        },
      },
    ],
  };
};
/**
 * @description: 建筑环形柱状图
 */
export const getBuildOptions = () => {
  const pieCenter = ["20%", "55%"];
  return {
    title: [
      {
        text: "新建建筑中\n绿色建筑占比",
        left: pieCenter[0],
        bottom: 0,
        textAlign: "center",
        textStyle: {
          fontWeight: "bold",
          fontSize: 12,
        },
      },
      {
        text: "实施绿色改造的建筑面积\n占改造建筑面积比例",
        left: pieCenter[1],
        bottom: 0,
        textAlign: "center",
        textStyle: {
          fontWeight: "bold",
          fontSize: 12,
        },
      },
    ],
    tooltip: {},
    legend: {
      top: "middle",
      left: "right",
      orient: "vertical",
      align: "left",
      data: ["当前值", "目标值"],
    },
    series: [
      {
        name: "当前值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 70,
          },
          {
            value: 30,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["25%", "45%"],
        center: [pieCenter[0], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
      {
        name: "目标值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 90,
          },
          {
            value: 10,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["50%", "70%"],
        center: [pieCenter[0], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
      {
        name: "当前值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 70,
          },
          {
            value: 30,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["25%", "45%"],
        center: [pieCenter[1], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
      {
        name: "目标值",
        type: "pie",
        colorBy: "series",
        data: [
          {
            value: 90,
          },
          {
            value: 10,
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
        clockWise: true,
        radius: ["50%", "70%"],
        center: [pieCenter[1], "35%"],
        labelLine: {
          show: false,
        },
        label: {
          position: "inside",
          show: true,
          color: "#fff",
          formatter: "{c}%",
        },
      },
    ],
  };
};
/**
 * @description: 韧性环形柱状图
 */
export const getToughnessOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    legend: {},
    grid: {
      top: 30,
      left: 150,
      right: 0,
      bottom: 5,
    },
    yAxis: [
      {
        type: "category",
        data: [
          "人均避难场所面积(m^2/人)",
          "有效避难面积(Hm^2)",
          "避难疏散距离(Km)",
        ],
        inverse: true,
        axisTick: {
          interval: 0,
        },
        axisLabel: {
          interval: 0,
          hideOverlap: false,
          overflow: "breakAll",
          formatter: (value: string) => {
            return value.replace(
              /\^(\d+)/,
              (str: string, match: string) => `{sup|${match}}`
            );
          },
          rich: {
            sup: {
              fontSize: 8,
              verticalAlign: "sup",
            },
          },
        },
      },
    ],
    xAxis: [
      {
        show: false,
        type: "value",
        min: 0,
      },
    ],
    series: [
      {
        name: "当前值",
        type: "bar",
        data: [85, 80, 85],
        label: {
          show: true,
          color: "#fff",
        },
      },
      {
        name: "目标值",
        type: "bar",
        data: [97, 92, 98],
        label: {
          show: true,
          color: "#fff",
        },
      },
    ],
  };
};
